<template>
  <div id="app">
    <img src="./assets/logo.png">
    <transition-group>
      <template v-if="ageIsEven">
        <h5 style="position:fixed" key="1">偶数!</h5>
        <h6 style="position:fixed" key="2">哈铪铪</h6>
      </template>
    </transition-group>
  
    <p :title="msg" :class="{odd:!ageIsEven,notOdd:ageIsEven}">Age = {{age}}</p>
    <button @click="age+=100">增加一百岁</button>
    <button @click="reduceAge(1000)">减少一千岁</button>
    <hr>
    <p>听说子组件要触发事件?/gone={{gone}}/</p>
    <child v-bind:bus="bus" :age="_age" v-on:childgo="reactGo"></child>
    <bus v-bind:bus="bus">
      <h1 slot="1">通过slot的age=>{{age}}</h1>
      <h2 slot="2">
        <!--<bus :bus="bus"></bus>-->
      </h2>
    </bus>
    <button @click="changeCurrentView">切换component的v-bin:is</button>
    <article>
      没有keepalive的component
      <component v-bind:is="currentView" :age="age" :bus="bus">
  
      </component>
    </article>
    <article>
      有keepalive的component
      <transition>
        <keep-alive>
          <component v-bind:is="currentView" :age="age" :bus="bus">
          </component>
        </keep-alive>
      </transition>
  
    </article>
  
  </div>
</template>

<script>
import Child from './components/Child.vue'
import Bus from './components/Bus.vue'
import Vue from 'vue'
export default {
  name: 'app',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      age: 0,
      gone: 0,
      bus: new Vue(),
      currentView: "bus"
    }
  },
  computed: {
    _age() {
      return this.age;
    },
    ageIsEven() {
      return this.age % 2 == 0;
    }
  },
  created() {
    this.age = 18;
    setInterval(function (_this) {
      // debugger
      _this.age++;
    }, 1000, this);
  },
  methods: {
    reactGo(event) {
      debugger
      this.gone++;
      console.info(event);
    },
    reduceAge(gap) {
      // debugger
      if (!gap) return this.age--;
      return this.age -= gap;
    },
    changeCurrentView() {
      this.currentView = (this.currentView == "bus") ? "child" : "bus"

    }
  },
  components: { Child, Bus }
}
</script>

<style language="css">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

p.odd {
  color: white;
  text-shadow: 0 0 4px red, 0 0 4px red, 0 0 4px red, 0 0 4px red;
}

p.notOdd {
  color: white;
  text-shadow: 0 0 4px blue, 0 0 4px blue, 0 0 4px blue, 0 0 4px blue;
}
</style>
